<script setup lang="ts">
import { computed } from 'vue';
import {
  darkTheme,
  useOsTheme,
  NConfigProvider,
  NMessageProvider,

  NSpace,
  NLayout,
  NLayoutHeader,
  NLayoutContent
} from 'naive-ui';
import PageHeader from './components/PageHeader.vue';
import { populateCartWithStorage } from './util/cart';

const osThemeRef = useOsTheme();

const theme = computed(() => osThemeRef.value === 'dark' ? darkTheme : null);

populateCartWithStorage();
</script>

<template>
  <n-config-provider :theme="theme">
    <n-message-provider>
      <n-space 
        vertical
        size="large"
      >
        <n-layout>
          <n-layout-header>
            <page-header />
          </n-layout-header>
          <n-layout-content content-style="padding: 24px;">
            <router-view />
          </n-layout-content>
        </n-layout>
      </n-space>
    </n-message-provider>
  </n-config-provider>
</template>

<style>
@import url('normalize.css/normalize.css');
body {
  margin: 0;
  font-size: 16px;
  font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body input {
  font-family: inherit;
  font-size: inherit;
}
</style>
